import { GameObject, RESOURCE_TYPE, resource, LOAD_EVENT, Scene, ResourceBase } from '@eva/eva.js'
import { Img, ImgSystem } from '@eva/plugin-renderer-img'
import { Graphics } from '@eva/plugin-renderer-graphics'
import { Transition } from '@eva/plugin-transition'
import { Event, HIT_AREA_TYPE } from '@eva/plugin-renderer-event';

export interface GameScreenInterface {
    scene: Scene;
    init(): void
}
export default class GameScreen implements GameScreenInterface {
    public scene: Scene;
    public init(): void {
        console.log('init')
        this.initView();
    }
    private initView(): void {
        this.scene = new Scene('game', {
            size: { width: 750, height: 1334 },
        });

        const bgImage = new GameObject('bgImage', {
            size: { width: 750, height: 1334 },
        })
        bgImage.addComponent(
            new Img({
                resource: 'background2'
            })
        )
        this.scene.addChild(bgImage);

        const container = new GameObject('container', {
            size: { width: 750, height: 1334 }
        })
        const graphics = container.addComponent(new Graphics())
        graphics.graphics.beginFill(0x000000, 0.8)
        graphics.graphics.drawRect(0, 0, 750, 1334)
        graphics.graphics.endFill()
        this.scene.addChild(container);

        const logoImg = new GameObject('logoImg', {
            size: { width: 250, height: 200 },
            origin: { x: 0.5, y: 0.5 },
            anchor: { x: 0.5, y: 0.3 }
        })
        logoImg.addComponent(
            new Img({
                resource: 'logo'
            })
        )
        container.addChild(logoImg)

        const startBtn = new GameObject('startBtn', {
            size: { width: 290, height: 210 },
            origin: { x: 0.5, y: 0.5 },
            anchor: { x: 0.5, y: 0.6 }
        })
        startBtn.addComponent(
            new Img({
                resource: 'start'
            })
        )
        const animation = startBtn.addComponent(new Transition())
        animation.group = {
            idle: [
                {
                    name: 'scale.x',
                    component: startBtn.transform,
                    values: [
                        {
                            time: 0,
                            value: 1,
                            tween: 'ease-out'
                        },
                        {
                            time: 400,
                            value: 1.2,
                            tween: 'ease-in'
                        },
                        {
                            time: 800,
                            value: 1
                        }
                    ]
                },
                {
                    name: 'scale.y',
                    component: startBtn.transform,
                    values: [
                        {
                            time: 0,
                            value: 1,
                            tween: 'ease-out'
                        },
                        {
                            time: 400,
                            value: 1.2,
                            tween: 'ease-in'
                        },
                        {
                            time: 800,
                            value: 1
                        }
                    ]
                },
            ]
        }
        animation.play('idle', 1)
        animation.on('finish', animationName => {
            animation.play('idle', 1)
        })
        const event = startBtn.addComponent(new Event())
        event.on('tap', () => {
            console.log('tap')
            this.scene.removeChild(container)
        })
        container.addChild(startBtn)
    }
}